<template>
  <el-dialog :title="title" :visible="showDialog" width="32%" @close="handleclose" @open="handleopen">
    <!-- 表单 -->
    <el-form ref="addForm" label-width="80px" :model="formData" :rules="rules">
      <el-form-item label="学科名称" prop="subjectName">
        <el-input v-model="formData.subjectName" placeholder="请输入学科名称"></el-input>
      </el-form-item>
      <!-- <el-switch inactive-text="是否显示" v-model="value" active-color="green" inactive-color="#ff4949">
    </el-switch> -->
      <el-form-item label="是否显示" prop="isFrontDisplay">
        <el-switch v-model="formData.isFrontDisplay" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="handleclose">取消</el-button>
      <el-button type="primary" @click="handlesubmit">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { add, detail, update } from '@/api/hmmm/subjects.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      value: 0,
      formData: {
        subjectName: '',
        isFrontDisplay: ''
      },
      data: {
        id: 0
      },
      // 验证
      rules: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 判断展示title
    title () {
      return this.formData.id ? '编辑学科' : '新增学科'
    }
  },
  methods: {
    // 关闭窗口
    handleclose () {
      this.$emit('update:showDialog', false)
      this.$refs.addForm.resetFields()
      this.formData = this.$options.data().formData
    },
    // 打开
    async handleopen () {
      // this.formData = {}
      if (this.id !== 0) {
        this.data.id = this.id
        const ret = await detail(this.data)
        // console.log(ret)
        this.formData = ret.data
      }
    },
    // 提交表单
    async handlesubmit () {
      // 编辑
      if (this.formData.id) {
        // console.log('编辑')
        const ret1 = await update(this.formData)
        // console.log(ret1)
        if (ret1.status === 200) {
          this.$emit('update:showDialog', false)
          this.$emit('on-success')
          this.$message.success('编辑学科成功啦')
          this.$refs.addForm.resetFields()
          // this.formData = this.$options.data().formData
        }
      } else {
        try {
          const ret = await add(this.formData)
          // console.log(ret)
          if (ret.status === 200) {
            this.$emit('on-success')
            this.$emit('update:showDialog', false)
            this.$message.success('添加学科成功啦')
            this.$refs.addForm.resetFields()
          } else {
            this.$message.error(ret.message)
          }
        } catch (error) {
          // console.log(error)
          this.$message.error('添加学科失败咯')
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.tree-box {
  position: absolute;
  width: 50%;
  min-height: 50px;
  left: 0;
  top: 45px;
  z-index: 100;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 5px;
  overflow: hidden;
  background-color: #fff;
}
</style>
